<template>
	<view class="goods">
		<view class="part1">
			<swiper class="swiper" :style="{'height':swiperHeight + 'px !important'}" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in product.images" :key="index">
					<image class="img" :src="item || '/static/img/yijian_bann.png'" :style="{'height':swiperHeight + 'px !important'}"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="part2">
			<view class="content">{{product.shortitle}} </view>
			<view class="goods-main">{{product.title}}</view>
			<view class="mall-mian">¥{{product.price || '0.00'}}</view>
			<view class="pirce">
				<view class="now">{{product.intergral || '0.00'}}
					<text style="font-size: 12px;font-weight: normal;">（积分）</text>
				</view>
				<view class="pirce-right">
					<image src="/static/img/sjian.png" @click="reduce" class="right-img"></image>
					<text style="color: #21252A;font-weight: bold;padding: 0 10px;">{{number}}</text>
					<image src="/static/img/sjia.png" @click="addGoods" class="right-img">
				</view>
			</view>
			<view class="num">库存剩余：{{product.sku || 0}}件</view>
		</view>
		<view class="part3">
			<view class="part3-title">商品详情</view>
		</view>
		<view style="padding-bottom: 60px;">
			<view v-for="(img,idx) in product.detail" :key="idx">
				<image :src="img" width="100%" class="detail-img" mode="widthFix"></image>
			</view>
		</view>
		<view class="submit">
			<view class="submit-wrapper">
				<view>合计：<text style="color: #FF6001;font-size: 18px;font-weight: bold;">{{total}}</text>
					<text style="font-size: 12px;color: #FF6001;">（积分）</text>
				</view>
				<view class="goods-btn" @click="hanldSubmit()">
					提交订单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				product: {},
				number: 1,
				auth_status: false,
				price: 0, //JCP单价
				id:'',
				swiperHeight:''
			};
		},
		onLoad(options){
			if(options.id){
				this.id = options.id
			}
			this.getInfo();
		},
		onReady(){
			const { windowWidth, windowHeight } = uni.getSystemInfoSync();	
			this.swiperHeight = windowWidth
		},
		computed: {
			total() {
				return (this.number * parseFloat(this.product.intergral)).toFixed(2) || 0;
			}
		},
		methods: {
			//减商品
			reduce(){
				if(this.number>1){
					this.number -= 1
				}
			},
			//加商品
			addGoods(){
				if(this.number < (this.product.sku)){
					this.number += 1
				}
			},
			// 商品详情
			getInfo() {
				const params = {
					id: this.id
				};
				this.$http.goodsdetail(params).then(res => {
					this.product = res.data;
				})
			},
			hanldSubmit(){
				let data = {
					id:this.id,
					img:this.product.images[0],
					intergral:this.product.intergral,
					shortitle:this.product.shortitle,
					num:this.number,
					total:this.total,
					sku:this.product.sku
				}
				uni.navigateTo({
					url:'/pages/mall/mallOrderInfo?data='+encodeURIComponent(JSON.stringify(data))
				})
			}
		}
	};
</script>
<style scoped>
	.goods {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: #f4f4f4;
	}

	.part1 {
		background: #fff;
	}
	.swiper {
		/* height: 250px; */
	}
	.part1 image {
		/* height: 250px; */
		width: 100%;
	}
	
	.detail-img{
		width: 100%!important;
	}

	.part2 {
		display: flex;
		background: #fff;
		padding: 15px 4%;
		justify-content: space-between;
		flex-direction: column;
		position: relative;
	}

	.part2 .content {
		font-size: 15px;
		color: rgba(0, 0, 0, 1);
		font-weight: bold;
	}

	.part2 .btn {
		display: flex;
		align-items: center;
	}

	.part3 {
		background: #fff;
		display: flex;
		padding: 20px 4% 30px 4%;
		justify-content: center;
	}


	.submit {
	
		font-size: 15px;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.submit-wrapper{
		padding: 12px 4%;
		display: flex;
		justify-content: space-between;
		background: #fff;
		align-items: center;
	}

	.mall-mian {
		color: rgba(174, 174, 174, 1);
		text-decoration: line-through;
	}

	.now {
		display: flex;
		font-size: 18px;
		color:#FF6001;
		font-weight: bold;
		margin-right: 6px;
		align-items: center;
	}

	.goods-main {
		color: rgba(134, 134, 134, 1);
	}

	.num {
		position: absolute;
		right: 20px;
		bottom: 50px;
		color: rgba(134, 134, 134, 1);
	}

	.right-img {
		width: 23px;
		height: 23px;
	}

	.pirce-right {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.pirce {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.part3-title {
		color: #141010;
		font-weight: bold;
		font-size: 16px;
	}

	.goods-btn {
		width: 200upx;
		height: 60upx;
		
		background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		box-shadow: 0px 2px 2px 0px #FFAB71;
		border-radius: 30upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60upx;
	}
</style>
